Workflow Lifecycle · Test Scenarios
+ Playwright Automation Guide

01บทนำ · About This Guide

Test scope · deliverables · references

เอกสารนี้เป็น Test Documentation สำหรับหน้าจอ Workflow Lifecycle v5.0 ครอบคลุม:

• Test Scenarios · 14 areas — Template list · Create/Edit · Steps · Transitions · SVG diagram · NCR loop
• Test Cases · 70 cases — Positive / Negative / Boundary / UI / Integration / A11y
• Playwright Automation Guide — POM · sample scripts · state machine testing
• NCR Sub-Loop coverage — 3 NCR states + Sub Contractor role + 5 NCR transitions

02Screen Overview

Template list · designer · state diagram · 3 templates

🗺️ Screen Map

🎨 10 States (7 base + 3 NCR sub-loop)

⚡ 6 Triggers

📋 3 Seeded Templates

🔄 NCR Sub-Loop Transitions (v5.0 new)

03Test Strategy

Test types · priority · environments

🎯 Test Types

⚡ Priority

• P1 — Critical · save · state machine integrity · NCR sub-loop
• P2 — High · UI accuracy · role assignment · validation
• P3 — Medium · language toggle · edge cases · polish

🌐 Environments

• Local: localStorage-backed · 3 seeded templates as fixtures
• Staging: Backend + DB · workflow templates table · seed script
• UAT: Real users test NCR loop end-to-end with actual QC + Sub Contractor

04Test Scenarios + Test Cases

14 areas · 70 detailed test cases

4.1 · 📚 Landing + Template List

4.2 · 🎯 Template Picker

4.3 · ➕ Create Template

4.4 · ✏️ Edit Existing Template

4.5 · 📋 Steps Editor

4.6 · 🔀 Transitions Editor

4.7 · 🎨 SVG State Diagram

4.8 · 🔄 NCR Sub-Loop Workflow (v5.0)

4.9 · 👥 Role Assignment

4.10 · 💾 Save + Validation

4.11 · 🗑️ Delete + Publish Status

4.12 · 🌐 Language Toggle TH/EN (v3.0)

4.13 · 💾 Data Persistence

4.14 · ♿ Accessibility

05Playwright Automation Guide + Sample Scripts

Setup · POM · sample tests for state machine · NCR loop

🚀 Setup

1. Install: npm init playwright@latest
2. Fixture reset: Seed 3 templates before each test
3. SVG testing: Query SVG elements via page.locator('svg [data-state="ncr_open"]')
4. State machine assertions: Verify counts + relationships + arrow styles

📁 Project Structure

treetests/workflow/
├── list.spec.ts               # TC-01 to TC-05
├── template-picker.spec.ts    # TC-06 to TC-10
├── create.spec.ts             # TC-11 to TC-15
├── edit.spec.ts               # TC-16 to TC-18
├── steps-editor.spec.ts       # TC-19 to TC-26
├── transitions.spec.ts        # TC-27 to TC-33
├── svg-diagram.spec.ts        # TC-34 to TC-42
├── ncr-loop.spec.ts           # TC-43 to TC-51 (CRITICAL)
├── role-assign.spec.ts        # TC-52 to TC-54
├── save-validation.spec.ts    # TC-55 to TC-59
├── delete-publish.spec.ts     # TC-60 to TC-63
├── language.spec.ts           # TC-64, TC-65
├── persistence.spec.ts        # TC-66 to TC-68
├── a11y.spec.ts               # TC-69, TC-70
└── e2e-full-flow.spec.ts      # Composite smoke
pages/
├── WorkflowListPage.ts
├── WorkflowDesignerPage.ts
├── StepsEditor.ts
├── TransitionsEditor.ts
└── SVGDiagram.ts
fixtures/
└── seed-workflows.json
playwright.config.ts

🎯 Page Object Model · WorkflowDesignerPage

TypeScriptimport { Page, Locator, expect } from '@playwright/test';

export type StateId = 'created' | 'assigned' | 'in_progress' | 'review' | 'done'
                     | 'blocked' | 'rejected' | 'ncr_open' | 'ncr_fixing' | 'ncr_verify';
export type Trigger = 'auto' | 'pass' | 'fail' | 'block' | 'unblock' | 'cancel';

export class WorkflowDesignerPage {
  readonly page: Page;
  readonly nameTh: Locator;
  readonly nameEn: Locator;
  readonly version: Locator;
  readonly btnAddStep: Locator;
  readonly btnAddTransition: Locator;
  readonly btnSave: Locator;
  readonly stepRows: Locator;
  readonly transitionRows: Locator;
  readonly svgDiagram: Locator;

  constructor(page: Page) {
    this.page = page;
    this.nameTh = page.locator('#wfNameTh');
    this.nameEn = page.locator('#wfNameEn');
    this.version = page.locator('#wfVersion');
    this.btnAddStep = page.getByRole('button', { name: /\+ Step/ });
    this.btnAddTransition = page.getByRole('button', { name: /\+ Transition/ });
    this.btnSave = page.getByRole('button', { name: /บันทึก|Save/ });
    this.stepRows = page.locator('.wf-step-row');
    this.transitionRows = page.locator('.wf-trans-row');
    this.svgDiagram = page.locator('svg.wf-diagram');
  }

  async addStep(state: StateId, role: string, slaHours: number = 4, note?: string) {
    await this.btnAddStep.click();
    const last = this.stepRows.last();
    await last.locator('.wf-state-select').selectOption(state);
    await last.locator('.wf-role-input').fill(role);
    await last.locator('.wf-sla-input').fill(String(slaHours));
    if (note) await last.locator('.wf-note-input').fill(note);
  }

  async addTransition(from: StateId, to: StateId, trigger: Trigger, label?: string) {
    await this.btnAddTransition.click();
    const last = this.transitionRows.last();
    await last.locator('.wf-from-select').selectOption(from);
    await last.locator('.wf-to-select').selectOption(to);
    await last.locator('.wf-trigger-select').selectOption(trigger);
    if (label) await last.locator('.wf-label-input').fill(label);
  }

  async save() {
    await this.btnSave.click();
    await this.page.getByRole('dialog').waitFor({ state: 'visible' });
    await this.page.getByRole('button', { name: /ยืนยัน|Confirm/ }).click();
  }

  // SVG diagram helpers
  async stateBox(state: StateId): Promise<Locator> {
    return this.svgDiagram.locator(`[data-state="${state}"]`);
  }

  async arrowExists(from: StateId, to: StateId, trigger: Trigger): Promise<boolean> {
    const arrow = this.svgDiagram.locator(
      `[data-from="${from}"][data-to="${to}"][data-trigger="${trigger}"]`
    );
    return (await arrow.count()) > 0;
  }
}

✅ Sample Test 1 · Standard Template Creation

TypeScriptimport { test, expect } from '@playwright/test';
import { WorkflowDesignerPage } from '../pages/WorkflowDesignerPage';

test.describe('Workflow · Standard Template', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/master-data/workflow');
  });

  test('TC-02 · 3 seeded templates render', async ({ page }) => {
    const cards = page.locator('.wf-card');
    await expect(cards).toHaveCount(3);
    await expect(page.getByText('Workflow มาตรฐาน QC')).toBeVisible();
    await expect(page.getByText('ตรวจสอบอย่างง่าย')).toBeVisible();
    await expect(page.getByText('Workflow มาตรฐาน + รอบแก้ NCR')).toBeVisible();
  });

  test('TC-07 · Create Standard workflow from scratch', async ({ page }) => {
    await page.getByRole('button', { name: /สร้าง Workflow ใหม่/ }).click();
    await page.getByText('⭐ Standard').click();
    await page.getByRole('button', { name: /เริ่มต้น|Continue/ }).click();

    const designer = new WorkflowDesignerPage(page);
    await expect(designer.stepRows).toHaveCount(7);        // 7 base states
    await expect(designer.transitionRows).toHaveCount(8);  // 8 base transitions
  });
});

✅ Sample Test 2 · NCR Sub-Loop (CRITICAL v5.0)

TypeScripttest.describe('Workflow · NCR Sub-Loop v5.0', () => {
  test('TC-43 · NCR template loads · 10 states', async ({ page }) => {
    await page.goto('/master-data/workflow');
    await page.getByText('Workflow มาตรฐาน + รอบแก้ NCR').click();

    const designer = new WorkflowDesignerPage(page);
    await expect(designer.stepRows).toHaveCount(10);

    // Verify all 3 NCR states present
    for (const state of ['ncr_open', 'ncr_fixing', 'ncr_verify'] as const) {
      const box = await designer.stateBox(state);
      await expect(box).toBeVisible();
    }
  });

  test('TC-45 → TC-49 · All 5 NCR transitions render correctly', async ({ page }) => {
    await page.goto('/master-data/workflow');
    await page.getByText('Workflow มาตรฐาน + รอบแก้ NCR').click();

    const designer = new WorkflowDesignerPage(page);

    // 1. in_progress → ncr_open (fail down)
    expect(await designer.arrowExists('in_progress', 'ncr_open', 'fail')).toBe(true);

    // 2. ncr_open → ncr_fixing (auto right)
    expect(await designer.arrowExists('ncr_open', 'ncr_fixing', 'auto')).toBe(true);

    // 3. ncr_fixing → ncr_verify (pass right)
    expect(await designer.arrowExists('ncr_fixing', 'ncr_verify', 'pass')).toBe(true);

    // 4. ncr_verify → ncr_fixing (fail curve back)
    expect(await designer.arrowExists('ncr_verify', 'ncr_fixing', 'fail')).toBe(true);

    // 5. ncr_verify → in_progress (pass up+left · NCR close)
    expect(await designer.arrowExists('ncr_verify', 'in_progress', 'pass')).toBe(true);
  });

  test('TC-50 · Sub Contractor role assigned to ncr_fixing', async ({ page }) => {
    await page.goto('/master-data/workflow');
    await page.getByText('Workflow มาตรฐาน + รอบแก้ NCR').click();

    const ncrFixingRow = page.locator('.wf-step-row[data-state="ncr_fixing"]');
    const roleInput = ncrFixingRow.locator('.wf-role-input');
    await expect(roleInput).toHaveValue('Sub Contractor');

    const slaInput = ncrFixingRow.locator('.wf-sla-input');
    await expect(slaInput).toHaveValue('48');
  });
});

✅ Sample Test 3 · Build Custom Workflow End-to-End

TypeScripttest('TC-E2E-01 · Build custom NCR workflow from scratch', async ({ page }) => {
  const designer = new WorkflowDesignerPage(page);

  // Open blank designer
  await page.goto('/master-data/workflow');
  await page.getByRole('button', { name: /สร้าง Workflow ใหม่/ }).click();
  await page.getByText('เริ่มจากเปล่า').click();

  // Fill basic info
  await designer.nameTh.fill('Workflow ทดสอบ NCR');
  await designer.nameEn.fill('Test NCR Workflow');
  await designer.version.fill('v1.0');

  // Add 5 main states + 3 NCR states
  await designer.addStep('created',     'QCM',             4);
  await designer.addStep('assigned',    'QCM',             8);
  await designer.addStep('in_progress', 'QC Inspector',    24);
  await designer.addStep('ncr_open',    'QC Inspector',    2);
  await designer.addStep('ncr_fixing',  'Sub Contractor',  48);
  await designer.addStep('ncr_verify',  'QC Inspector',    4);
  await designer.addStep('done',        '—',               0);

  // Add all NCR transitions
  await designer.addTransition('created',     'assigned',    'auto');
  await designer.addTransition('assigned',    'in_progress', 'auto');
  await designer.addTransition('in_progress', 'ncr_open',    'fail');   // NCR trigger
  await designer.addTransition('ncr_open',    'ncr_fixing',  'auto');
  await designer.addTransition('ncr_fixing',  'ncr_verify',  'pass');
  await designer.addTransition('ncr_verify',  'ncr_fixing',  'fail');   // re-fix
  await designer.addTransition('ncr_verify',  'in_progress', 'pass');   // NCR close
  await designer.addTransition('in_progress', 'done',        'pass');

  // Save with confirm popup
  await designer.save();

  // Verify list shows 4 templates now (3 seed + 1 new)
  await expect(page.locator('.wf-card')).toHaveCount(4);
  await expect(page.getByText('Workflow ทดสอบ NCR')).toBeVisible();
});

✅ Sample Test 4 · SVG Diagram Arrow Style Verification

TypeScripttest('TC-39 · Arrow style per trigger', async ({ page }) => {
  await page.goto('/master-data/workflow');
  await page.getByText('Workflow มาตรฐาน QC').click();

  // Verify pass arrow · solid green
  const passArrow = page.locator('svg [data-from="review"][data-to="done"][data-trigger="pass"]');
  await expect(passArrow).toHaveAttribute('stroke', '#27AE60');
  await expect(passArrow).not.toHaveAttribute('stroke-dasharray', /.+/);  // no dash

  // Verify fail arrow · dashed red
  const failArrow = page.locator('svg [data-from="review"][data-to="rejected"][data-trigger="fail"]');
  await expect(failArrow).toHaveAttribute('stroke', /#DC2626|#FF5A7A/);
  await expect(failArrow).toHaveAttribute('stroke-dasharray', /.+/);  // has dash

  // Verify auto arrow · solid indigo
  const autoArrow = page.locator('svg [data-trigger="auto"]').first();
  await expect(autoArrow).not.toHaveAttribute('stroke-dasharray', /.+/);
});

✅ Sample Test 5 · Language Toggle (v3.0)

TypeScripttest('TC-64 · Language TH → EN updates React page content', async ({ page }) => {
  await page.goto('/master-data/workflow');

  // Default TH · check Thai text
  await expect(page.getByText('Workflow มาตรฐาน QC ก่อสร้าง')).toBeVisible();

  // Toggle to EN
  await page.locator('[data-lang="en"]').click();

  // Verify EN content
  await expect(page.getByText('Standard Construction QC Workflow')).toBeVisible();

  // Open template · verify state labels also switch
  await page.getByText('Standard Construction QC Workflow').click();
  await expect(page.getByText('Assigned')).toBeVisible();   // state name EN
  await expect(page.getByText('In Progress')).toBeVisible();
});

🎭 Fixture · Reset localStorage Before Each Test

TypeScript// tests/setup.ts
import seed from '../fixtures/seed-workflows.json';

test.beforeEach(async ({ page }) => {
  await page.addInitScript((data) => {
    localStorage.setItem('wf_templates', JSON.stringify(data));
  }, seed);
});

06Appendix

📌 Version History

• ConstructQ_WorkflowLifecycle_v5.0.html · source · NCR sub-loop diagram drawing complete
• เอกสารนี้ v1.0 · 13 ก.ค. 2569 · 70 test cases · Playwright + sample scripts

🔗 References

• Playwright Docs: https://playwright.dev
• State machine testing: https://xstate.js.org/docs/
• Related file: ConstructQ_WorkflowLifecycle_ER_v2.0.html · Tables_v2.0.xlsx
• Excel companion: ConstructQ_Workflow_TestScenario_v1.0.xlsx

🌳 3 Seeded Templates Reference